<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<body>
    <div class="box">
        <h1>{{msg}}</h1>
        <p>{{msg}}</p>
        <p>{{name}}</p>
    </div>
    <script>
        const hello_vue = new Vue({ //配置对象
            el: ".box",
            data: { //data对象中的所有属性都加入到vue响应式系统，这些值一改变，视图也会发生改变（响应），只更新数据即可
                msg: "111",
                name: '' //注：改变的数据在data中一定要有初始值，没有初始值不会响应
            }
        })
        console.log(hello_vue);
        hello_vue.msg = 'aaa';
        hello_vue._data.msg = 'bbb';
        hello_vue.$data.msg = 'ccc'; //vue实例上的一些属性和方法  $
        hello_vue.name = 'ddd';
        // hello_vue实例对象   hello_vue._data  hello_vue.$data
        /* 
        数据驱动视图
         */
        console.dir(Vue);
        /* 
        初始值
        test:'',
        num:0,
        beal:false/true
        arr:[],
        obj:{},
        err:null
         */
        var obj = {
            name: 'ttt'
        }
        //  获取  h1   obj.name = 'lili'
        // h1.innerText = obj.name
        // mvvm模式  views  viewModel  model
        // vue
        // obj.name = 'lili'
        /* vue渐进式JavaScript框架  关心视图层 声明式渲染  
        
            声明式编程 有结果无过程  简单易写
            命令式编程 有过程 有流程有结果

            特点：响应式，编码简单，体积小，性能好，运行效率高，适合移动端PC端开发;只关心ui,可扩张性高，遵循MVVM模式
            兼容性：不支持ie8及以下版本，ie8及以下浏览器无Object.defineProperty()
            vue 借鉴了angular模板 和数据绑定技术  借鉴了react 组件化和虚拟DOM技术
            react
            angular
        
         */
    </script>
</body>
</html>